<template>
  <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body destroy-on-close>
    <div id="vs" ref="vs"></div>
  </el-dialog>
</template>
<script>
import dialogMixin from "../../../mixins/dialogMixin";
import Player from 'xgplayer/dist/simple_player';
import volume from 'xgplayer/dist/controls/volume';
import playbackRate from 'xgplayer/dist/controls/playbackRate';

export default {
  name: "UploaderVideoPreview",
  mixins: [dialogMixin],
  data() {
    return {
      title: "视频预览",
    };
  },
  mounted() { },
  methods: {
    showVideo(videoUrl) {
      this.open = true;
      this.$nextTick(() => {
        console.log(this.$refs);
        let player = new Player({
          el: this.$refs.vs,
          url: videoUrl,
          controlPlugins: [
            volume,
            playbackRate
          ],
          autoplay: true,
          playsinline: true,
          height: 420,
          width: 660,
          playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
        });
      });
    },
  },
};
</script>
<style scoped>
#vs {
  width: 300px;
  height: 200px;
}
</style>
